<template>
<div>

    <span class="spritelink"></span>

    <div class="discuss">
        <span>共有 : {{commentLength}}人参与讨论</span>
    </div>

 <div class="comment" v-if="commentShow">
   <p class="CommentTitle">评论</p>
   <ul class="commentList">
     <li v-for="item of commentlist">
      <img :src="item.thumb">
      <span>{{item.username}}</span>
      <span>{{item.time}}</span>
      <p>{{item.comment}}</p>
     </li>
   </ul>
 </div> 

 <div class="noComment" v-else>
   <p>暂无评论</p>
 </div>
    <div class="sendComment">
        <input type="text" class="CommentWrite" v-model="commentinfo">
        <x-button @click.native="" type="primary">回复</x-button>
    </div>
    
</div>
</template>

<script>
import XButton from 'vux'

export default {
  components: {
    XButton
  }
}
</script>

<style lang="less">
#article{
    padding: 8px 8px 0px 8px;
    .article_title{
       display: block;
   }
   .article_title{
      font-size: 15px;
   }
   .article_sendTime{
     font-size: 13px;
     color: #747474;
     margin-bottom: 8px;
     display: inline-block;
     margin-right: 7px;
   }
   .article_category{
     font-size: 13px;
     margin-bottom: 8px;
     display: inline-block;
     color: #747474;   
   }
}
.commentList{
  li{
    list-style: none;
    padding: 0px 0px 0px 6px;
    border-bottom: 1px solid #e8e8e8;
    margin: 0px 0px 20px 0px;
    img{
      border-radius: 50%;
      width: 47px;
      height:47px;
      float: left;
      margin-left: -2px;
      }
    span:nth-child(2){
      font-size: 14px;
      color: #616161;
      font-weight: 300;
      margin-top: 2px;
      padding-bottom: 2px;
      display: block;
      margin-left: 50px;
    }
    span:nth-child(3){
      font-size:12px;
      display: block;
      margin-left: 50px;
      color: #8c8c8c;
      font-weight: 300;
    }
    p{
      padding: 14px 0px 9px 2px;
      font-size: 13px;
      font-weight: 300;
    }
  }
}
.noComment{
  p{
    text-align: center;
    font-weight: 200;
    margin-top: 16px;
    color: #9e9e9e;
  }
}
.comment{
  padding: 14px 11px 16px;
  .CommentTitle{
    padding: 0px 0px 5px 3px;
    font-size: 14px;
  }
 .CommentTitle:before{
    padding: 0px 2px;
    background-color: #DF6363;
    content: '';
    margin-right: 6px;
  }
}
.sendComment{
    position: fixed;
    bottom: 49px;
    width: 100%;
    padding-left: 3.2%;
    height: 41px;
    background: #ffffff;
    span{
      font-size: 22px;
      position: relative;
      float: right;
      position: absolute;
      padding: 8px 0px 0px 15px;
    }
}
.spritelink{
    width: 100%;
    display: block;
    border-bottom: 1px solid #e7e7e7;
}
.CommentWrite{
    outline: none;
    background: #e9e6e6;
    width: 75.6%;
    height: 27px;
    border-radius: 20px;
    padding-left: 11px;
    margin: 5px 9px 5px 0px;
    font-size: 15px;
}
.discuss{
    padding: 9px 0px 0px 10px;
    font-size: 14px;
    font-weight: 200;
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 368px)
and (-webkit-min-device-pixel-ratio: 2) {
    .CommentWrite{
        outline: none;
        background: #e9e6e6;
        width: 69.6%;
        height: 27px;
        border-radius: 20px;
        padding-left: 11px;
        margin: 5px 9px 5px 0px;
        font-size: 15px;
    }
}
</style>


